<template>
  <view>
    <u-navbar bg-color="transparent" auto-back>
      <view slot="left" class="backIcon">
        <u-icon
          name="arrow-left"
          @click="back"
          size="26px"
          color="#333"
        ></u-icon>
      </view>
    </u-navbar>
    <view class="top-img">
      <u-image
        width="750rpx"
        height="600rpx"
        src="https://haowallpaper.com/link/common/file/previewFileImg/786d50481e9c29b09d0ced4c83ca67f0786d50481e9c29b09d0ced4c83ca67f0"
      ></u-image>
    </view>
    <view class="content">
      <view>
        <view class="pt-24 px-12 color-black">
          <view class="flex items-center">
            <u-image
              width="40px"
              height="40px"
              shape="circle"
              src="https://qxt-oss.yummall.cn/1762452183367946240/image/m0oyxuxy-1kai3bkj9.jpg"
            ></u-image>
            <view class="w-154 px-12">
              <view class="text-14">程厂长</view>
              <view class="text-12 pt-4 color-gray"
                >2024-10-17 10:14:03 发布</view
              >
            </view>
          </view>
          <view class="text-18 py-24 text-center">
            【小溯源】 2024年10月17日河南温州街
          </view>
          <u-parse :content="content"></u-parse>
          <view class="pt-24">
            <view class="mb-12">活动地址</view>
            <view class="flex items-center address-box px-12">
              <u-icon name="map-fill" size="24" color="#5eb495"></u-icon>
              <view class="px-8 flex-1 text-12"
                >南昌市 南昌龙川镇 城南大道 118号</view
              >
            </view>
          </view>
          <view class="py-24 u-border-bottom">
            <view class="mb-12">报名时间</view>
            <view class="text-12 color-gray"
              >截止报名时间： 2024-10-24 10:00:00</view
            >
          </view>
          <view class="py-24 u-border-bottom">
            <view class="mb-12">活动时间</view>
            <view class="text-12 color-gray"
              >2024-10-24 10:00:00 - 2024-10-24 18:00:00</view
            >
          </view>
          <view class="py-24 u-border-bottom">
            <view class="mb-12">报名门槛</view>
            <view class="text-12 color-gray">仅会员/服务商参与</view>
          </view>
          <view class="py-24 u-border-bottom">
            <view class="mb-12">报名费用</view>
            <view class="text-12 color-gray">会员报名费用 99元每人</view>
            <view class="text-12 color-gray mt-8">服务商报名费用 99元每人</view>
          </view>
        </view>

        <u-gap :height="pageFooterHeight"></u-gap>
      </view>

      <view class="footer px-12 pt-30 border-box">
        <view class="flex justify-center mb-12">
          <u-avatar-group :urls="urls" size="18" gap="0.618"></u-avatar-group>
          <text class="text-12 color-gray ml-8">6人报名</text>
        </view>
        <u-button
          type="primary"
          text="报名参加"
          shape="circle"
          @click="navToApply"
        ></u-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      urls: [
        "https://cdn.uviewui.com/uview/album/1.jpg",
        "https://cdn.uviewui.com/uview/album/2.jpg",
        "https://cdn.uviewui.com/uview/album/3.jpg",
        "https://cdn.uviewui.com/uview/album/4.jpg",
      ],
      pageFooterHeight: 50,
      content: `
					<p>露从今夜白，月是故乡明</p>
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
				`,
      scrollY: false,
    };
  },
  methods: {
    back() {
      this.$Router.back();
    },
    getFooterHeight() {
      this.$uGetRect(".footer").then(({ height = 120 }) => {
        this.pageFooterHeight = height;
      });
    },
    onReachBottom() {
      this.scrollY = true;
    },
    navToApply() {
      this.$Router.push({ name: "applyActivity" });
    },
  },
  onLoad() {
    this.getFooterHeight();
  },
};
</script>

<style lang="scss" scoped>
.backIcon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  border: 0.5px solid #e5e5e5;
}
.top-img {
  position: fixed;
  top: 0;
  width: fit-content;
  left: 0;
}

.content {
  z-index: 1;
  background: #fff;
  position: relative;
  top: 550rpx;
  border-radius: 48rpx;
  min-height: calc(100vh - 600rpx);
  overflow: clip;
  .address-box {
    height: 120rpx;
    background: #f2fef9;
    border-radius: 8px;
  }
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 750rpx;
    background: white;
    padding-bottom: 50rpx;
  }
}
</style>
